<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 组件的调用,可以是单标签调用也可以是双标签调用，但在cdn方式中没有构建过程，用双标签 -->
    <titlecmp></titlecmp>
    <!-- <h3>el</h3> -->
  </div>

  <div id="app2">
    <titlecmp></titlecmp>
  </div>

  <script>
    // 定义组件  定义方式  全局   和   局部
    // vue中组件名称，它不建议用大写字母，建议用小写
    // 全局 一次定义，全局可用   局部定义完后，还需要在使用的地方进行注册才可能
    // 使用cdn方法来用vue，它定义的组件不支持独立的css样式的书写 html+js
    // 全局组件定义
    // Vue.component('名称',{配置})
    Vue.component('titlecmp', {
      data() {
        return {
          title: '全局组件定义的标题@'
        }
      },
      // vue在cdn
      // template: `<h1>{{ title }}</h1>`
      // 它的写法就是虚拟dom
      render(h) {
        // 参数1：标签名称或组件名称  tag:
        // 参数2：属性，如果为null则表示此元素没有属性  props
        // 参数3：字符串|数组(表示它有子元素)   children
        // 在工程化中,render方法,它还支持jsx(js增强版本) cdn中不支持
        return h('h1', null, this.title)
      }
    })


    // render > template > el[$mount]
    new Vue({
      el: '#app',
      data: {
        title: '全局组件你好!'
      },
      // template: `<h1>template</h1>`,
      // 它的写法就是虚拟dom
      // render(h) {
      //   // 参数1：标签名称或组件名称
      //   // 参数2：属性，如果为null则表示此元素没有属性
      //   // 参数3：字符串|数组(表示它有子元素)
      //   return h('h1', null, 'render')
      // }
    })
    new Vue({
      el: '#app2',
      data: {
        title: '全局组件你好!'
      }
    })
  </script>
</body>

</html>